<template>
  <div class="tanchuangbg" v-show="showDividend" @click="toggleShowDivi" style="display: none;" >
    <!--分红-->
    <div class="fenhong" @click.stop >
      <p class="xiazhutc_p1">
        <i @click="toggleShowDivi" class="iconfont icon-guanbi" ></i>
      </p>
      <div class="fenhong_top">
        <ul>
          <li @click="toggleTab(1)" v-bind:class="dividendType == 1?'fenhong_top_on':''" class="" ><i class="iconfont icon-62"></i>{{$t('devidend.devidend_pool')}}</li>
          <li @click="toggleTab(2)" v-bind:class="dividendType == 2?'fenhong_top_on':''"><i class="iconfont icon-jiezhiya"></i>{{$t('devidend.pledge')}}</li>
          <li @click="toggleTab(3)" v-bind:class="dividendType == 3?'fenhong_top_on':''"><i class="iconfont icon-iconfonticon-xitong"></i>{{$t('devidend.dividend_record')}}</li>
          <li @click="toggleTab(4)" v-bind:class="dividendType == 4?'fenhong_top_on':''"><i class="iconfont icon-qianbao"></i>{{$t('devidend.my_balance')}}</li>
        </ul>
      </div>
      <div class="fenhong-body">
        <!-- 分红池 -->
        <div v-show="dividendType == 1" class="fenhong_1" style="display: none;">
          <div class="fenhong_1_leiji">
            <div class="fenhong_1_leiji_top">
              <p>{{$t('devidend.cur_devidend_total')}}<i @click="toggleShowTag" class="iconfont icon-wenhao" ></i> </p>
              <p class="fenhong_1_leiji_top_num"> <i class="iconfont icon-shouyi1"></i> {{statisticsData.amount}} <span class="Gray_f_l"></span> </p>
              <!--当前分红池 说明-->
              <div class="index_wenhao_instructions" v-show="showDividendTag" style="display: none;width: 100%;" >
                {{$t('devidend.dividend_tip')}}
              </div>
            </div>
          </div>
          <p class="next_fenhong"><i class="iconfont icon-shijian1"></i>{{$t('devidend.next_dividend')}}:&nbsp; 00:20:47</p>
          <div class="fenhong_1_leiji">
            <div class="fenhong_1_leiji_left">
              <p class="Gray_f_s">{{$t('devidend.cur_dividend')}}</p>
              <p><i class="iconfont icon-shouyi1"></i></p>
              <p class="now_fenhong">222.5227 <span class="Gray_f_s"> EOS</span></p>
            </div>
            <div class="fenhong_1_leiji_right">
              <ul>
                <li>
                  <p class="Gray_f_s">{{$t('devidend.expect_earn')}}</p>
                  <p class="">0.0000 <span class="Gray_f_s">EOS</span> </p>
                </li>
                <li>
                  <p class="Gray_f_s">{{$t('devidend.per_rab_earn')}}</p>
                  <p>{{perRab}} <span class="Gray_f_s">EOS</span> </p>
                </li>
              </ul>
            </div>
          </div>
          <p class="dibubiaoti">{{$t('devidend.dividend_rule')}}</p>
          <p class="dibubiaoti_p">{{$t('devidend.dividend_rule_info')}}</p>
        </div>
        <!-- 质押 -->
        <div v-show="dividendType == 2" class="fenhong_1 " style="display: none;">
          <div class="fenhong_1_leiji_top" style="background:none;">
            <p>{{$t('devidend.pledge_title')}}<i @click="toggleShowPledge" class="iconfont icon-wenhao"></i></p>
            <div class="index_wenhao_instructions" v-show="showPledgeInfo" style="display: none;">
              {{$t('devidend.pledge_des')}}
            </div>
          </div>

          <div class="fenhong_1_leiji" style="margin-top:0px;">
            <p class="white_f_s">{{$t('devidend.cur_devidend_total')}}</p>
            <p class="fenhong_1_leiji_top_num"> 178018.1907 <span class="Gray_f_m">RAB</span> </p>
            <p class="Gray_f_s">(94.04%{{$t('devidend.pledge_percent')}})</p>
          </div>

          <div class="fenhong_1_leiji">
            <p class="white_f_s">{{$t('devidend.can_pledge')}}</p>
            <p class="fenhong_1_leiji_top_num"> <span class="green_f_m">0</span> <span class="Gray_f_s">RAB</span> </p>
            <div class="zhiya_input">
              <span class="zhiya_img"><img src="res1/images/rab/logo.jpg" alt=""></span>
              <input type="text" placeholder="0.000">
              <span class="zhiya_input_quanbu">{{$t('devidend.all')}}</span>
              <span class="zhiya_input_zhiya">{{$t('devidend.pledge')}}</span>
            </div>
          </div>
          <!-- 质押赎回 -->
          <div class="fenhong_1_leiji ">
            <p class="white_f_s  white_f_s_width">{{$t('devidend.pledged')}}</p>
            <p class="fenhong_1_leiji_top_num white_f_s_width"> <span class=" Golden_f_xl">0</span> <span class="Gray_f_m">RAB({{$t('devidend.total_pledge')}}0.00%)</span> </p>
            <div class="zhiya_input">
              <span class="zhiya_img"><img src="../assets/image/logo.jpg" alt=""></span>
              <input type="text" placeholder="0.000">
              <span class="zhiya_input_quanbu">{{$t('devidend.all')}}</span>
              <span class="zhiya_input_shuhui">{{$t('devidend.redeem')}}</span>
            </div>
          </div>

          <p class="zhiya_nav"> *{{$t('devidend.redeem_info')}}

          </p>
        </div>
        <!-- 我的余额 -->
        <div v-show="dividendType == 4" class="fenhong_1 " style="display: none;">
          <div class="fenhong_1_leiji">
            <div class="fenhong_yue">
              <p>{{$t('devidend.my_dividend_balance')}}</p>
              <p>0.0000&nbsp; EOS</p>
            </div>
          </div>
          <div class="yue_btn">{{$t('devidend.get_dividend')}}</div>
        </div>
        <!-- 分红记录 -->
        <div v-show="dividendType == 3" class="fenhong_1 " style="display: none;">
          <p class="fenhong_jilu_P"><span>&lt;</span>&nbsp; 2019-01-04&nbsp;<span>&gt;</span></p>
          <div class="fenhong_jilu">
            <ul>
              <li>
                <span>{{$t('devidend.dividend_time')}}</span>
                <span>{{$t('devidend.dividend_amount')}}</span>
              </li>
              <li>
                <span>{{$t('devidend.total')}}</span>
                <span>2012.7171EOS</span>
              </li>
              <li>
                <span>08:00:00</span>
                <span>2012.7171EOS</span>
              </li>
              <li>
                <span>08:00:00</span>
                <span>2012.7171EOS</span>
              </li>
              <li>
                <span>08:00:00</span>
                <span>2012.7171EOS</span>
              </li>
              <li>
                <span>08:00:00</span>
                <span>2012.7171EOS</span>
              </li>
              <li>
                <span>08:00:00</span>
                <span>2012.7171EOS</span>
              </li>
              <li>
                <span>08:00:00</span>
                <span>2012.7171EOS</span>
              </li>
              <li>
                <span>08:00:00</span>
                <span>2012.7171EOS</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      showDividend: false,
      showDividendTag: false, // 显示分红提示
      showPledgeInfo: false,
      dividendType: 1,
      perRab: 0,
      statisticsData: {
        amount: '0.0000 RAB'
      },
      dividendCD: null // 获取分红数据计时器
    }
  },
  created () {
    console.log('dividend created')
    this.getData()
  },
  methods: {
    toggleShowTag () {
      console.log('click')
      this.showDividendTag = !this.showDividendTag
    },
    toggleShowDivi () {
      if (this.showDividend) {
        this.init()
      } else {
        this.showDividend = true
        this.getDataCD()
      }
    },
    toggleTab (val) {
      this.dividendType = val
    },
    toggleShowPledge () {
      this.showPledgeInfo = !this.showPledgeInfo
    },
    init () {
      this.showDividend = false
      this.showDividendTag = false
      this.dividendType = 1
      if (this.dividendCD) {
        clearInterval(this.dividendCD)
        this.dividendCD = null
      }
    },
    async getData () {
      await this.$scatterJs.scatter.connect(this.$config.gameName)
      let eos = this.$scatterJs.scatter.eos(this.$config.network, this.$eosjs)
      eos.getTableRows({
        code: this.$config.cont_owner,
        scope: this.$config.cont_owner,
        table: 'other',
        json: true
      }).then(res => {
        this.statisticsData = res.rows[0]
        var raiserab = parseFloat(this.statisticsData.raiserab.replace(' RAB', ''))
        var mining = parseFloat(this.statisticsData.mining.replace(' RAB', ''))
        var amount = parseFloat(this.statisticsData.amount.replace(' EOS', ''))
        this.perRab = ((amount / (raiserab + mining)) * 10000).toFixed(4)
      }).catch(e => {
        console.log('other table e:', e)
      })
    },
    getDataCD () {
      this.dividendCD = setInterval(() => {
        this.getData()
      }, 2000)
    }
  }
}
</script>

<style></style>
